// 引入jQuery库和自定义的ajax方法
import '../lib/jquery.js';
import { ajax } from '../utils/ajax.js';

// 初始化页面元素的变量
let listBox = $('.list');        // 商品列表容器
let categoryBox = $('.category'); // 分类容器
let filterBox = $('.filterBox').first(); // 筛选条件（热销/折扣）容器
let saleBox = $('.saleBox');      // 折扣类型容器
let sortBox = $('.sortBox');      // 排序方式容器
let searchBox = $('.search');     // 搜索框

// 分页按钮
let firstBtn = $('.first');       // 首页按钮
let prevBtn = $('.prev');         // 上一页按钮
let nextBtn = $('.next');         // 下一页按钮
let lastBtn = $('.last');         // 末页按钮

// 分页信息显示
let totalBox = $('.total');       // 当前页码/总页数显示
let pagesizeBox = $('.pagesize'); // 每页显示条数选择器
let jumpBox = $('.jump');         // 跳转到指定页的输入框
let jumpBtn = $('.go');           // 跳转按钮

// 总页数
let totalPage;

// 请求数据对象
let data = {
    current: 1, // 当前页码
    pagesize: 12, // 每页显示条数
    search: '', // 搜索关键字
    filter: '', // 筛选条件（热销/折扣）
    saleType: 10, // 折扣类型
    sortType: 'id', // 排序字段
    sortMethod: 'ASC', // 排序方式
    category: '', // 分类
};

// 异步函数：渲染分类列表
async function renderCategory() {
    let { data: { code, list } } = await ajax.get('/goods/category');
    if (code != 1) return console.log('获取分类列表失败');

    // 清空分类列表容器并添加“全部”选项
    categoryBox.empty().append(`<li class="active">全部</li>`);
    // 遍历分类列表并添加到页面
    list.forEach(e => {
        categoryBox.append(`<li>${e}</li>`);
    });
}

// 异步函数：渲染商品列表
async function renderList() {
    let { data: { code, list, total } } = await ajax.get('/goods/list', { params: data });
    if (code != 1) return console.log('获取商品列表失败');

    // 构建商品列表HTML字符串
    let str = list.map(e => `
        <li data-id="${e.goods_id}">
            <div class="show">
                <img src="${e.img_big_logo}">
                ${e.is_hot ? '<span class="hot">热销</span>' : ''}
                ${e.is_sale ? '<span>折扣</span>' : ''}
            </div>
            <div class="info">
                <p class="title">${e.title}</p>
                <p class="price">
                    <span class="curr">¥ ${e.current_price}</span>
                    <span class="old">¥ ${e.price}</span>
                </p>
            </div>
        </li>
    `).join('');

    // 如果没有商品，显示“无商品”图片
    if (list.length === 0) {
        data.current = 0;
        str = '<img src="../img/no.png" alt="">';
    }

    // 更新商品列表容器内容
    listBox.html(str);

    // 更新分页信息
    totalPage = total;
    totalBox.text(`${data.current} / ${totalPage}`);
    jumpBox.val(`${data.current}`);

    // 根据当前页码启用或禁用分页按钮
    prevBtn.toggleClass('disable', data.current <= 1);
    nextBtn.toggleClass('disable', data.current >= totalPage);
    firstBtn.toggleClass('disable', data.current <= 1);
    lastBtn.toggleClass('disable', data.current >= totalPage);
}

// 绑定分类点击事件，更新筛选条件并重新渲染商品列表
categoryBox.on('click', ({ target }) => {
    if (target.nodeName === 'LI') {
        categoryBox.children().removeClass('active');
        target.classList.add('active');
        data.category = target.innerText === '全部' ? '' : target.innerText;
        renderList();
    }
});

// 绑定首页、末页、上一页、下一页按钮点击事件，更新当前页码并重新渲染商品列表
[firstBtn, lastBtn, prevBtn, nextBtn].forEach(btn => {
    btn.on('click', () => {
        let newCurrent = data.current;
        switch (btn[0].className) {
            case 'first':
                newCurrent = 1;
                break;
            case 'last':
                newCurrent = totalPage;
                break;
            case 'prev':
                newCurrent = Math.max(1, data.current - 1);
                break;
            case 'next':
                newCurrent = Math.min(totalPage, data.current + 1);
                break;
        }
        data.current = newCurrent;
        renderList();
    });
});

// 绑定跳转按钮点击事件，更新当前页码并重新渲染商品列表
jumpBtn.on('click', () => {
    let target = parseInt(jumpBox.val(), 10);
    if (target < 1 || target > totalPage) return alert('跳转页不合法');
    data.current = target;
    renderList();
});

// 绑定每页显示条数选择器变化事件，更新每页显示条数并重新渲染商品列表
pagesizeBox.on('change', () => {
    data.pagesize = parseInt(pagesizeBox.val(), 10);
    data.current = 1; // 重置当前页为第一页
    renderList();
});

// 绑定筛选条件（热销/折扣）点击事件，更新筛选条件并重新渲染商品列表
filterBox.on('click', ({ target }) => {
    if (target.nodeName === 'LI') {
        filterBox.children().removeClass('active');
        target.classList.add('active');
        data.filter = target.dataset.type;
        data.current = 1; // 重置当前页为第一页
        renderList();
    }
});

// 绑定折扣类型点击事件，更新折扣类型并重新渲染商品列表
saleBox.on('click', ({ target }) => {
    if (target.nodeName === 'LI') {
        saleBox.children().removeClass('active');
        target.classList.add('active');
        data.saleType = parseInt(target.dataset.type, 10);
        data.current = 1; // 重置当前页为第一页
        renderList();
    }
});

// 绑定排序方式点击事件，更新排序方式并重新渲染商品列表
sortBox.on('click', ({ target }) => {
    if (target.nodeName === 'LI') {
        sortBox.children().removeClass('active');
        target.classList.add('active');
        data.sortType = target.dataset.type;
        data.sortMethod = target.dataset.method;
        data.current = 1; // 重置当前页为第一页
        renderList();
    }
});

// 绑定搜索框输入事件，更新搜索关键字并重新渲染商品列表
searchBox.on('input', () => {
    data.search = searchBox.val();
    data.current = 1; // 重置当前页为第一页
    renderList();
});

// 绑定商品列表点击事件，跳转到商品详情页
listBox.on('click', ({ target }) => {
    if (target.nodeName === 'LI') {
        let id = target.dataset.id;
        sessionStorage.setItem('id', id); // 存储商品ID到会话存储
        location.href = './detail.html'; // 跳转到商品详情页
    }
});

// 初始渲染分类列表和商品列表
renderCategory();
renderList();